<template>
  <div class="layoutCon">
    <div class="breadcrumb">
      <router-link class="home" to="/"></router-link> > <router-link to="/my">마이페이지</router-link> > 최근/찜 채용공고
    </div>
    <div class="layoutMy">
      <user-center-nav></user-center-nav>
      <div class="myCon">
        <div class="jobList">
          <h2>최근본공고</h2>
          <div class="loadList" v-loading="pageConfig2.loading&&pageConfig2.page==1">
            <ul v-if="footList.length">
              <li v-for="(item,index) in footList" :key="index">
                <div class="pic">
                  <img src="@images/ico_job.png" alt="">
                </div>
                <div class="info">
                  <label>{{item.companyName||item.user.company}}</label>
                  <strong @click="showInfo(item.id,index,1)">{{item.title}}</strong>
                  <p class="t">
                    <template v-if="item.jobs[0]">
                      {{item.jobs[0].job1&&item.jobs[0].job1.name}}/{{item.jobs[0].job2&&item.jobs[0].job2.name}}
                    </template>                  
                  </p>
                  <p>
                    <template v-if="item.areas[0]">
                    {{item.areas[0].area1&&item.areas[0].area1.name}} <em v-if="item.areas[0].area2">></em> {{item.areas[0].area2&&item.areas[0].area2.name}}  |  
                    </template>
                    {{item.deadline}} 마감
                  </p>                  
                  <p class="v"><em>{{item.source&&item.source!=0?item.source:'워크위즈'}}</em>에서 <em>{{curToThousands(item.readCount||0)}}</em> 번 조회</p>
                </div>
                <div class="bom">
                  <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index,1)">자세히보기</a>
                  <el-popconfirm
                    v-if="item.collect"
                    title="찜한공고에서 제거하시겠습니까?"
                    confirmButtonText='확인'
                    cancelButtonText='취소'
                    iconColor="red"
                    @onConfirm="collect(item,index,1) "
                  >
                    <a slot="reference" href="javascript:;" target="_self" :class="['btn ico_favo',item.collect&&'collect']">찜하기</a>
                  </el-popconfirm>    
                  <a v-else href="javascript:;" target="_self" class="btn ico_favo" @click="collect(item,index,1)">찜하기</a>            
                </div>
              </li>
            </ul>
            <div class="notData" v-if="!pageConfig2.loading&&footList.length==0">데이터 없음</div>
          </div>          
          <div class="loadMore" v-if="!pageConfig2.isAll">
            <el-button type="primary" :loading="pageConfig2.loading" @click="loadMore2" class="btnMore">더보기</el-button>
          </div>
        </div>
        <div class="jobList">
          <h2>찜한공고</h2>
          <div class="loadList" v-loading="pageConfig.loading&&pageConfig2.page==1">
            <ul v-if="collectList.length">
              <li v-for="(item,index) in collectList" :key="index">
                <div class="pic">                  
                  <img src="@images/ico_job.png" alt="">
                </div>
                <div class="info">
                  <label>{{item.companyName||item.user.company}}</label>
                  <strong @click="showInfo(item.id,index,2)">{{item.title}}</strong> 
                  <p class="t">
                    <template v-if="item.jobs[0]">
                      {{item.jobs[0].job1&&item.jobs[0].job1.name}}/{{item.jobs[0].job2&&item.jobs[0].job2.name}}
                    </template>                  
                  </p>
                  <p>
                    <template v-if="item.areas[0]">
                    {{item.areas[0].area1&&item.areas[0].area1.name}} <em v-if="item.areas[0].area2">></em> {{item.areas[0].area2&&item.areas[0].area2.name}}  |  
                    </template>
                    {{item.deadline}} 마감
                  </p>       
                  <p class="v"><em>{{item.source&&item.source!=0?item.source:'워크위즈'}}</em>에서 <em>{{curToThousands(item.readCount||0)}}</em> 번 조회</p>
                </div>
                <div class="bom">
                  <a href="javascript:;" target="_self" class="btn ico_view" @click="showInfo(item.id,index,2)">자세히보기</a>
                  <el-popconfirm
                    title="찜한공고에서 제거하시겠습니까?"
                    confirmButtonText='확인'
                    cancelButtonText='취소'
                    iconColor="red"
                    @onConfirm="collect(item,index,2) "
                  >
                    <a slot="reference" href="javascript:;" target="_self" :class="['btn ico_favo',item.collect&&'collect']">찜하기</a>
                  </el-popconfirm>  
                </div>
              </li>
            </ul>
            <div class="notData" v-if="!pageConfig.loading&&collectList.length==0">데이터 없음</div>
          </div>
          <div class="loadMore" v-if="!pageConfig.isAll">
              <el-button type="primary" :loading="pageConfig.loading" @click="loadMore" class="btnMore">더보기</el-button>
          </div>
        </div>
      </div>
    </div>
    <resume-card :cardParams="cardData" @changeCollect="changeCollect"></resume-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { myCollectList, myFootList, myJobCollect } from '@/api';
import { toThousands } from '@/utils'
import userCenterNav from '@/components/userCenterNav'
import resumeCard from '@/components/resumeCard'

export default {
  name:'',
  components:{userCenterNav,resumeCard},
  props:[],
  data(){
    return {
      cardData:null,
      pageConfig:{
        page:1,
        per:6,
        loading:false,
        isAll:true
      },
      collectList:[],
      pageConfig2:{
        page:1,
        per:6,
        loading:false,
        isAll:true
      },
      footList:[],
    }
  },
  computed:{
    ...mapState(['errorAvatar2','defaultAvatar']),
  },
  created(){
    this.getCollectList();
    this.getFootList();
  },
  mounted(){},
  methods:{
    async getCollectList(type){
      this.pageConfig.loading=true;
      type=='reload'&&(this.pageConfig.page=1,this.pageConfig.isAll=true);
      let res = await myCollectList({page:this.pageConfig.page,per:this.pageConfig.per});
          if (res.code == 200) {
            type=='reload'&&(this.collectList=[]);
            this.pageConfig.page+=1;
            let _arry=res.data.data;
              if(_arry.length){
                _arry.forEach((o)=>{
                  o.isOpen=false;
                })
                this.collectList=this.collectList.concat(_arry);
              }
            !res.data.next_page_url?(this.pageConfig.isAll=true):(this.pageConfig.isAll=false);
            this.pageConfig.loading=false;            
          }else{
            this.pageConfig.loading=false;  
          }
    },
    loadMore(){
      !this.pageConfig.loading&&this.getCollectList();
    },
    async getFootList(type){
      this.pageConfig2.loading=true;
      type=='reload'&&(this.pageConfig2.page=1,this.pageConfig2.isAll=true);
      let res = await myFootList({page:this.pageConfig2.page,per:this.pageConfig2.per});
          if (res.code == 200) {
            type=='reload'&&(this.footList=[]);
            this.pageConfig2.page+=1;
            let _arry=res.data.data;
              if(_arry.length){
                _arry.forEach((o)=>{
                  o.isOpen=false;
                })
                this.footList=this.footList.concat(_arry);
              }
            !res.data.next_page_url?(this.pageConfig2.isAll=true):(this.pageConfig2.isAll=false);
            this.pageConfig2.loading=false;            
          }else{
            this.pageConfig2.loading=false;  
          }
    },
    loadMore2(){
      !this.pageConfig2.loading&&this.getFootList();
    },
    async collect(obj,index,type){
      let _status=1;
          obj.collect&&(_status=0)
      let res = await myJobCollect({integrated_id:obj.id,status:_status});
      try {
        if(res.code==200){
          if(type==1){
            this.footList[index].collect=_status;      
          }else{
            this.collectList.splice(index, 1)    
          }
          this.getCollectList('reload');
          this.getFootList('reload');
        }        
      } catch (error) {}
    },
    changeCollect(status){
      if(this.curType==1){
        this.footList[this.curIndex].collect=status;
      }else{
        this.collectList[this.curIndex].collect=status;
      }
    },
    showInfo(id,index,type){
      this.curIndex=index;
      this.curType=type;
      this.cardData={
        isShow:true,
        id:id
      }
    },
    curToThousands(num){
      return toThousands(num)
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
 @import "@/assets/styles/my.scss";
</style>